<template>
	<view class="me ">
		<!-- #ifdef H5 -->
		<u-sticky v-if="windowUrl">
			<image @click="$store.commit('toWindowUrl')" src="https://job.ydylmold.cn/image/home-fill.png" style="width: 50rpx;margin-left: 30rpx;" mode="widthFix"></image>
		</u-sticky>
		<!-- #endif -->
		<view class="u-flex u-flex-col">
			<!-- 卡片 -->
			<view class="head-box">
				<view class="top-info u-flex u-row-between">
					<view v-if="isLogin">
						<u-image v-if="version == 1" width="160rpx" height="160rpx" radius="50%" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+userInfo.headImg">
						</u-image>
						<u-image v-else width="160rpx" height="160rpx" radius="50%" :src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/'+compInfo.companyLogo">
						</u-image>
					</view>
					<!-- 如果没有登录 头像默认 -->
					<u-image v-if="!isLogin" @click="$store.dispatch('showAuthModal')" width="160rpx" height="160rpx" radius="50%">
					</u-image>
					<view class="left-box" v-if="isLogin">
						<view class="info-id u-flex u-col-top u-row-between">
							<view class="u-flex">
								<text class="box-text1" :style="titleStyle">{{version == 2?compInfo.owner:userInfo.realName || userInfo.usrName}}</text>
								<text class="id-text" v-if="userInfo.posts">{{version == 2?'法人':userInfo.posts}}</text>
							</view>
							<u-image v-if="version == 1" class="logo-img" width="64rpx" height="64rpx" :lazyLoad="true" @click="previewImg()" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/' + userInfo.homepageCode">
							</u-image>
							<u-image v-if="version == 2" class="logo-img" width="64rpx" height="64rpx" :lazyLoad="true" @click="previewImg()" :src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/usrCompanyHomepageCode/' + compInfo.homepageCode">
							</u-image>
						</view>
						<text class="info-text">{{version == 1? userInfo['usrCompany'] && userInfo['usrCompany']['companyNameCn'] || '' : compInfo.companyNameCn}}</text>
					</view>
					<view class="left-box" v-if="!isLogin" @click="$store.dispatch('showAuthModal')">
						<view class="info-id u-flex u-col-top u-row-between">
							<view class="u-flex">
								<text class="box-text1">未登录</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bom-info u-flex u-row-between" v-if="isLogin">
					<view class="u-flex u-flex-col u-col-top">
						<text class="bom-left-text1">总资产</text>
						<text class="bom-left-text2">{{moneyData.userAmtNum || '0.00'}}</text>
					</view>
					<view class="bom-btn" @click="routerPage({name:'提现'})"> 提现 </view>
				</view>
			</view>
			<view class="list u-flex u-row-between" v-for="(item,index) in listOption" :key="index" @click="routerPage(item)">
				<view class="left">
					<view class="icon">
						<image :src="item.src" mode=""></image>
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
				<view class="right u-flex">
					<!-- 	<text v-if="item.name == '会员中心'" class="u-font-24"
						style="color: rgb(245, 175, 84);margin-right: 20rpx;">{{isVip?isVip+'次':'购买次数'}}</text> -->
					<u-icon name="arrow-right" color="rgba(142, 149, 158, 1);" size="10"></u-icon>
				</view>
			</view>
			<my-auth-modal></my-auth-modal>
		</view>
	</view>
</template>
<script>
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		queryCraftsmanById,
	} from "@/common/api/auth.js"
	import {
		orderPaymentStatus,
		userVipSearch
	} from "@/common/api/pay.js"
	import {
		queryAccountFun
	} from '@/utils/passSet.js'
	import {
		deleteLoginByTerminalModel
	} from '@/common/api/user.js'
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		data() {
			return {
				listOption: [{
						name: '编辑资料',
						src: "https://job.ydylmold.cn/mingpian/image/me/bianji.png"
					}, {
						name: '切换身份',
						src: "https://job.ydylmold.cn/mingpian/image/me/qiehuan.png"
					}, {
						name: '选择模板',
						src: "https://job.ydylmold.cn/mingpian/image/me/xuanzhe.png"
					}, {
						name: '加入公司',
						src: "https://job.ydylmold.cn/mingpian/image/me/qyrzed.png",
						tipText: ''
					}, {
						name: '会员中心',
						src: "https://job.ydylmold.cn/mingpian/image/me/huiyuan.png",
						tipText: ''
					}, {
						name: '我的邀请',
						src: 'https://job.ydylmold.cn/mingpian/image/me/yaoqing.png'
					},
					{
						name: '我的素材',
						src: 'https://job.ydylmold.cn/mingpian/image/me/sucai.png'
					}, {
						name: '我的引流',
						src: 'https://job.ydylmold.cn/mingpian/image/me/yinliu.png'
					}, {
						name: '拉黑名单',
						src: 'https://job.ydylmold.cn/mingpian/image/me/heimingdan.png'
					}, {
						name: "退出登录",
						src: 'https://job.ydylmold.cn/mingpian/image/me/tuichu.png'
					}
				],
				version: getToken('version'),
				userInfo: getToken('userInfo'),
				compInfo: getToken('complogin'),
				windowUrl: getToken('windowUrl'),
				isVip: 0,
				moneyData: {},
				titleStyle: "font-size: 25px;"
			}
		},
		// 触发下拉刷新
		onPullDownRefresh() {
			this.init()
			// 延迟关闭刷新动画
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad: function() {
			this.init();
		},
		computed: {
			...mapGetters(['isFresh', 'isLogin']),
		},
		onShow: async function() {
			uni.showTabBar()
			this.moneyData = await queryAccountFun()
			if (this.isFresh) {
				setTimeout(() => {
					this.init()
				}, 500)
			}
			this.userInfo = getToken('userInfo')
			this.compInfo = getToken('complogin')
			if (getToken('version') == 2) {
				let idx = this.listOption.findIndex(v => {
					return v.name == '留言消息'
				})
				if (idx == -1) {
					let pushItem1 = {
						name: '留言消息',
						src: 'https://job.ydylmold.cn/mingpian/image/me/liuyan.png',
						size: 46,
						left: -7,
						wigth: 500
					}
					this.listOption.splice(4, 0, pushItem1) //添加
				}

				let idx1 = this.listOption.findIndex(v => {
					return v.name == '加入公司'
				})
				if (idx1 != -1) {
					this.listOption.splice(idx1, 1) //删除
				}
				idx1 = this.listOption.findIndex(v => {
					return v.name == '加入申请'
				})
				if (idx1 != -1) {
					this.listOption.splice(idx1, 1) //删除
				}
				let pushItem = {
					name: '加入申请',
					src: 'https://job.ydylmold.cn/mingpian/image/me/qyrzed.png',
					size: 46,
					left: -7,
					wigth: 500
				}
				this.listOption.splice(3, 0, pushItem) //添加
				// name: '加入公司',
				// src: "https://job.ydylmold.cn/mingpian/image/me/qyrzed.png",
			} else if (getToken('version') == 1) {
				let idx = this.listOption.findIndex(v => {
					return v.name == '留言消息'
				})
				if (idx != -1) {
					this.listOption.splice(idx, 1) //删除
				}
				let idx1 = this.listOption.findIndex(v => {
					return v.name == '加入申请'
				})
				if (idx1 != -1) {
					this.listOption.splice(idx1, 1) //删除
				}
				idx1 = this.listOption.findIndex(v => {
					return v.name == '加入公司'
				})
				if (idx1 != -1) {
					this.listOption.splice(idx1, 1) //删除
				}
				let pushItem = {
					name: '加入公司',
					src: 'https://job.ydylmold.cn/mingpian/image/me/qyrzed.png',
					size: 46,
					left: -7,
					wigth: 500
				}
				this.listOption.splice(3, 0, pushItem) //添加
				let un = this.userInfo.realName || this.userInfo.usrName;
				if (un.length > 3) {
					this.titleStyle = "font-size: 15px;"
				}
			}
			this.$store.dispatch('getUnReadListByEntity')
			this.setVipState()
		},
		methods: {
			previewImg() {
				let arr = []
				if (getToken('version') == 1) {
					arr = ['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/' + this.userInfo
						.homepageCode
					]
				} else {
					arr = ['https://www.ydylmold.cn/images/ydylapp/usrCompany/usrCompanyHomepageCode/' + this.compInfo
						.homepageCode
					]
				}
				uni.previewImage({
					current: 0,
					urls: arr
				})
			},
			setVipState() {
				let params = {}
				if (getToken('version') == 1) {
					params['craftsmanId'] = getToken('useNum')
				} else {
					params['companyId'] = getToken('useNum')
				}
				params['modleName'] = 'mingpian'
				userVipSearch(params).then(res => {
					if (res.data.code == 200) {
						let list = res.data.data.records
						this.isVip = list[0].vipQty || 0
					} else {
						this.isVip = 0
					}
				})
			},
			init() {
				this.version = getToken('version')
				if (getToken('version') == 1) {
					this.queryCraftsmanById(getToken('useNum'))
				} else {
					this.searchOneNew()
				}
			},
			//获取用户信息
			async queryCraftsmanById(userId) {
				let data = await this.$store.dispatch('queryCraftsmanById', {
					userId: userId,
					setShare: false
				})
				if (data.craftsmanId) {
					this.userInfo = data
					this.headImg = this.userInfo.headImg
				}
			},
			//获取用户信息
			async searchOneNew() {
				console.log('ddddddddddddddddd');
				let data = await this.$store.dispatch('searchOneNew', {
					userId: getToken('useNum'),
					setShare: false
				})
				if (data.companyId) {
					this.compInfo = data
					this.headImg = this.compInfo.companyLogo
				}
			},
			routerPage({
				name
			}) {
				if (!this.isLogin) {
					this.$store.dispatch('showAuthModal');
					return
				}
				switch (name) {
					case "编辑资料":
						if (getToken('version') == 1) { //编辑个人资料
							uni.$u.route({
								url: '/pages/meSub/editData/editData',
							})
						} else {
							uni.$u.route({
								url: '/pages/meSub/editData/editDataComp',
							})
						}
						break;
					case "选择模板":
						uni.$u.route({
							url: 'pages/index/selectTemplate',
						})
						break;
					case "加入公司":
						uni.$u.route({
							url: 'pages/me/joinTeam',
						})
						break;
					case "加入申请":
						uni.$u.route({
							url: 'pages/me/teamList',
						})
						break;
					case "提现":
						uni.$u.route({
							url: 'pages/meSub/myWallet/myWallet',
						})
						break;
					case "会员中心":
						uni.$u.route({
							url: 'pages/meSub/vipPage/vipPage',
						})
						break;
					case "意见反馈":
						uni.$u.route({
							url: 'pages/componentC/feedback/feedback',
						})
						break;
					case "我的邀请":
						uni.$u.route({
							url: '/pages/meSub/myInvitation/myInvitation',
						})
						break;
					case "拉黑名单":
						uni.$u.route({
							url: '/pages/meSub/blacklist/blacklist',
						})
						break;
					case "留言消息":
						uni.$u.route({
							url: '/pages/meSub/liuyan/liuyan',
						})
						break;
					case "我的素材":
						uni.$u.route({
							url: '/pages/newsPart/index/mymaterial',
						})
						break;
					case "我的引流":
						uni.$u.route({
							url: '/pages/newsPart/index/mydrainage',
						})
						break;
					case "退出登录":
						uni.showModal({
							title: "提示",
							content: "您确定要退出登录吗？",
							success: (e) => {
								deleteLoginByTerminalModel({
									terminalModel: getToken('deviceId')
								})
								if (e.confirm) {
									this.$store.dispatch('unLogin')
									//跳转登录
									this.$store.commit("toLogin")
								}
							}
						})
						break;
					case "切换身份":
						uni.$u.route({
							url: `/pages/meSub/selectID?useNum=${getToken('userInfo')['craftsmanId']}`,
						})
						break;
				}
			},
			toUrl(url) {
				if (getToken('isLogin')) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.showAuthModal('accountLogin')
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.me {
		background-color: #F8F8F8;
		padding-bottom: 50rpx;
	}

	.head-box {
		margin-top: 35rpx;
		background: $base-color;
		width: 710rpx;
		border-radius: 64rpx;
		background: linear-gradient(222.33deg, rgba(66, 153, 219, 1) 0.93%, rgba(37, 127, 217, 1) 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		padding: 40rpx;
		box-sizing: border-box;

		.top-info {
			.left-box {
				flex: 1;
				margin-left: 58rpx;

				.info-id {
					.box-text1 {
						font-size: 48rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}

					.id-text {
						text-align: center;
						padding: 0 12rpx;
						line-height: 34rpx;
						border-radius: 17rpx;
						border: 1rpx solid rgba(255, 255, 255, 1);
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						margin-left: 20rpx;
					}
				}

				image {
					width: 60rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 1);
					background: $base-color;
				}

				.info-text {
					font-size: 28rpx;
					font-weight: 300;
					color: rgba(255, 255, 255, 1);
					line-height: 80rpx;
					width: 400rpx;
					display: block;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}

		.bom-info {
			margin-top: 70rpx;
			color: rgba(255, 255, 255, 1);

			.bom-left-text1 {
				font-size: 28rpx;
				font-weight: 500;
			}

			.bom-left-text2 {
				font-size: 60rpx;
				font-weight: 500;
				margin-top: 27rpx;
			}

			.bom-btn {
				min-width: 112rpx;
				line-height: 52rpx;
				border-radius: 50rpx;
				text-align: center;
				background: rgba(29, 169, 255, 1);
			}
		}
	}

	.list {
		width: 686rpx;
		padding: 30rpx 30rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 20rpx;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;

			.text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.icon {
				margin-right: 34rpx;
				height: 32rpx;
				width: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>